<template>
	<view class="order-code e-m-t-20">
		<view class="bg-white e-p-t-40 e-p-l-30 e-p-r-30 e-p-b-24">
			<view class="e-flex-xy-center e-m-b-32">
				<view :class="[info.receivingStatus !== 10 && 'order-code__mask']" @tap="handlePreviewCode">
					<e-qrcode ref="qrcodeRef" :text="info.verifyCode" :size="100"></e-qrcode>
				</view>
			</view>
			<view class="order-code__text-box e-flex-xy-center">
				<text class="e-font-28 fw-500 e-m-r-10" v-if="info.receivingStatus === 10 && info.receivingType === 2">{{ $t('order.自提码') }}</text>
				<text class="e-font-28 fw-500 e-m-r-10" v-else>{{ $t('setting.验证码') }}</text>
				<text :class="[info.receivingStatus !== 10 && 'order-code__text-box__txt e-rela']" class="e-font-28 fw-500">{{ info.verifyCode }}</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
	// #ifdef MP-WEIXIN
	// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
	options: {
		virtualHost: true
	}
	// #endif
});
</script>

<script setup lang="ts">
import { ref } from 'vue';
import type { OrderItem } from '@/common/request/api';

const props = withDefaults(
	defineProps<{
		info: OrderItem;
	}>(),
	{}
);

let codeImage = '';
const qrcodeRef = ref();
const getCodeImage = () =>
	new Promise((resolve, reject) => {
		
		if (!codeImage) {
			uni.showLoading({
				title: 'loading...'
			});
			qrcodeRef.value?.toTempFilePath({
				success: (res: { tempFilePath: string; }) => {
					codeImage = res.tempFilePath;
					resolve(codeImage);
				},
				fail() {
					reject();
				},
				complete() {
					uni.hideLoading();
				}
			});
		}else{
			resolve(codeImage);
		}
	});

const handlePreviewCode = () => {
	getCodeImage().then(() => {
		uni.previewImage({
			current: 0,
			urls: [codeImage]
		});
	});
};
</script>

<style lang="scss" scoped>
.order-code {
	&__mask {
		opacity: 0.2;
	}
	&__text-box {
		height: 90rpx;
		border-radius: 10rpx;
		border: 2rpx solid #e6e6e6;
		&__txt {
			&::after {
				content: '';
				position: absolute;
				height: 2rpx;
				left: 0;
				right: 0;
				top: 50%;
				background-color: #333;
			}
		}
	}
}
</style>
